<template>
  <!-- 星空颗粒效果 -->
  <div class="StarrySky">
    <StarrySky />
  </div>
  
  <!-- 全局加载动画 -->
  <LoadingAnimation :show="$store.state.appLoading" />
  
  <!-- 返回顶部按钮 -->
  <ScrollToTop />

  <!-- 主内容区域 -->
  <transition name="main-content" appear>
    <div v-if="!$store.state.appLoading" class="main-content">
      <el-config-provider :locale="locale">
        <router-view></router-view>
      </el-config-provider>
    </div>
  </transition>
</template>

<script setup>
import StarrySky from '@/components/StarrySky.vue'
import LoadingAnimation from '@/components/LoadingAnimation.vue'
import ScrollToTop from '@/components/ScrollToTop.vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { onMounted } from 'vue'
import { useStore } from 'vuex'
import router from '@/router/index'

let locale = zhCn
const store = useStore()

// 应用启动时初始化
onMounted(() => {
  // 确保页面在刷新后滚动到顶部
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
  window.scrollTo({ top: 0, behavior: 'smooth' })
  
  // 监听加载完成事件 - 无论是否首次访问都添加监听
  window.addEventListener('loadingComplete', () => {
    store.dispatch('setAppLoading', false)
    // 设置已访问标志到localStorage
    localStorage.setItem('blog_visited', 'true')
  })
  
  // 检查是否第一次访问博客
  const hasVisited = localStorage.getItem('blog_visited')
  
})

// 监听路由变化，确保每次路由切换后页面都在顶部
router.afterEach(() => {
  setTimeout(() => {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }, 100)
})
</script>

<style scoped>
.StarrySky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}

/* 确保StarrySky组件内的容器有正确尺寸 */
.StarrySky >>> .box_starrySky {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* 确保星星容器居中 */
.StarrySky >>> .stars_starrySky {
  left: 50% !important;
  top: 50% !important;
  width: 200px;
  height: 100px;
}

.main-content {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  background: var(--theme-background);
}

/* 主内容进入动画 - 上拉进入 */
.main-content-enter-active {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-content-enter-from {
  opacity: 0;
  transform: translateY(100vh);
}

.main-content-enter-to {
  opacity: 1;
  transform: translateY(0);
}
</style>